<template>
    <div class="carousel-container">
        <div
            class="carousel-slide"
            :style="{ transform: 'translateX(' + (-currentIndex * width) + 'px)' }"
            ref="carouselSlide"
        >
            <div
                class="slide"
                v-for="(item, index) in items"
                :key="index"
                ref="slides"
            >
            </div>
        </div>

        <template v-if="!autoplay">
            <button
                class="prev"
                @click="prevSlide"
            >&#10094;</button>
            <button
                class="next"
                @click="nextSlide"
            >&#10095;</button>
        </template>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        return {
            width: 0,
            intervalId: null,
            autoplay: true,
            currentIndex: 0,
            items: [
                {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 300, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                },
                {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                },
                {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 100, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                },
            ],
            // 存储图表实例
            chartInstances: []
        };
    },
    created() {

    },
    mounted() {
        // 初始化轮播图
        this.render()

        // 开始自动轮播
        this.startAutoPlay()

        // 获取轮播图宽度
        this.width = this.$refs.slides[0].offsetWidth

        // 监听窗口大小变化事件
        window.addEventListener('resize', this.handleResize);
    },
    methods: {
        prevSlide() {
            // 切换到上一张轮播图
            this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
        },
        nextSlide() {
            // 切换到下一张轮播图
            this.currentIndex = (this.currentIndex + 1) % this.items.length;
        },
        // 开始自动轮播
        startAutoPlay() {
            if (this.autoplay) {
                this.intervalId = setInterval(() => {
                    this.nextSlide()
                }, 3000); // 设置轮播间隔时间，单位为毫秒
            }
        },
        // 渲染轮播图
        render() {
            // 初始化轮播图
            this.$refs.slides.forEach((v, index) => {
                var myChart = echarts.init(v);
                this.chartInstances[index] = myChart; // 存储图表实例
                myChart.setOption(this.items[this.currentIndex]);
            });
        },
        // 处理窗口大小变化事件
        handleResize() {
            // 获取轮播图宽度
            this.width = this.$refs.slides[0].offsetWidth;
            // 调整图表大小
            this.chartInstances.forEach((chart, index) => {
                chart.resize();
            });
        }
    },
    destroyed() {
        // 页面关闭销毁自动播放定时器
        clearInterval(this.intervalId);
        // 移除窗口大小变化事件监听器
        window.removeEventListener('resize', this.handleResize);
        // 销毁图表实例
        this.chartInstances.forEach(chart => {
            chart.dispose();
        })
    }
};
</script>

<style scoped>
.carousel-container {
    position: relative;
    overflow: hidden;
}

.carousel-slide {
    overflow: hidden;
    display: flex;
    height: 100vh;
    width: 300vw;
    transition: transform 0.5s ease;
}

.carousel-slide .slide {
    width: 100%;
    height: 100%;
}

.caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 20px;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 100;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}
</style>
